<template>
  <div class="nav1">
    <NavTitle title="天气状况" />
    <div class="flex items-center justify-between h-140px pt-10px">
      <div class="flex-col-center">
        <div>
          <span class="text-18px">今日</span>
          <span class="text-18px ml-28px">{{ jtData.fxDate }}</span>
        </div>
        <div class="flex items-center">
          <i :class="['text-80px', `qi-${jtData.iconDay}`]"></i>
          <div class="ml-10px">
            <div class="text-18px">{{ jtData.textDay }}</div>
            <div class="text-18px mt-20px">
              {{ jtData.tempMin }}℃~{{ jtData.tempMax }}℃
            </div>
          </div>
        </div>
      </div>
      <div class="flex-col-center color-#BAE6FF">
        <div>明天</div>
        <i :class="['text-40px', `qi-${mtData.iconDay}`]"></i>
        <div class="mt-8px">{{ mtData.tempMin }}℃~{{ mtData.tempMax }}℃</div>
      </div>
      <div class="flex-col-center color-#2DA0E3">
        <div>后天</div>
        <i :class="['text-40px', `qi-${htData.iconDay}`]"></i>
        <div class="mt-8px">{{ htData.tempMin }}℃~{{ htData.tempMax }}℃</div>
      </div>
      <div class="flex-col-center gap-8px currwd">
        <div class="currwd_tit">实时温度</div>
        <div class="currwd_sc">{{ infoData2.temperature }}℃</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import NavTitle from '@/components/NavTitle'
import { weather3dApi, jinyangTodayApi } from '@/api'

const infoData = ref([])
const jtData = computed(() => {
  return infoData.value[0] || {}
})
const mtData = computed(() => {
  return infoData.value[1] || {}
})
const htData = computed(() => {
  return infoData.value[2] || {}
})

const getData = async () => {
  const { data } = await weather3dApi({
    location: '105.471785,32.428696'
  })

  const { daily } = JSON.parse(data)
  infoData.value = daily || []
}

getData()

const infoData2 = ref({})
const getData2 = async () => {
  const { data } = await jinyangTodayApi()
  infoData2.value = data || {}
}

getData2()

</script>

<style lang="scss" scoped>
.nav1 {
  color: #fff;
}
.currwd{
  width: 84px;
  height: 84px;
  border-radius: 20px;
  background: rgba(90, 196, 242, 0.19);
  border: 3px solid rgba(45, 160, 227, 1);
  .currwd_tit{
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 14px;
    color: rgba(255, 255, 255, 1);
  }
  .currwd_sc{
    font-size: 24px;
    color: rgba(29, 189, 242, 1);
    font-weight: 600;
  }
}
</style>
